<template>
	<div class="search">
		<input type="text" v-model="config.searchValue" confirm-type="search" @confirm="search" placeholder="搜索内容">
		<icon  @click.stop="search" type="search"></icon>
	</div>
</template>

<script>
	export default {
		props: {
			// 传入config示例
			// searchconfig: {
			// 	searchUrl: "/pages/newList/newList",  跳转url
			// 	isTabBar: true, 是否底部导航栏页面 非必传参数
			// 	searchValue: "" 搜索内容
			// }
			"config": {
				"searchUrl" : String,
				"isTabBar" : Boolean,
				"searchValue" : String
			}
		},

		data() {
			return {

			}
		},
		created() {
			
		},
		// 深度监听示例 当父页面需要直接使用内容值时
		// watch: {
		// 	searchconfig: {
		// 		handler: function(newValue, oldValue) {
		// 			console.log(newValue.searchValue)
		// 		},
		// 		deep: true
		// 	}
		// },
		methods: {
			search: function() {
				// 判断是否是底部导航栏页 不是的话就直接携带query跳转
				if (this.config.isTabBar) {
					return this.setChace(this.config.searchValue)
					
				}
				// 在onLoad中获取
				uni.navigateTo({
					//示例 `/pages/test/test?search=${value}`
					url: `${this.config.searchUrl}?search=${this.config.searchValue}`
				})

			},
			setChace: function(value) {
				// 存放在全局变量中 可以在onShow中获取
				getApp().globalData.search = value
				uni.switchTab({
					url: `${this.config.searchUrl}`
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.search {
		display: flex;
		position: relative;
		width: 100vw;
		padding: 1rem;
		box-sizing: border-box;
		justify-content: center;
		align-items: center;

		input {
			flex: 1;
			min-width: 0;
			height: 1rem;
			padding: .5rem;
			border: 1px solid #ccc;
			border-radius: 10px;
		}

		icon {
			position: absolute;
			margin: 0;
			right: 1.5rem;
			padding: .25rem;
			border-radius: 50%;
		}
	}
</style>
